<template>
  <div class="noticedetail">
    <div class="breadbox">
      <el-breadcrumb separator="/" class="datails_nav">
        <el-breadcrumb-item :to="{ path: '/' }"
          ><el-icon><HomeFilled /></el-icon>首页</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/notice' }"
          >通知公告</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/noticedetail' }"
          >通知公告详情</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="mainbox">
      <div class="content u-m-tb-20">
        <div class="content_left">
          <div class="title">
            {{ detail.title }}
          </div>
          <div class="time">
            <el-icon><Clock /></el-icon>&nbsp;时间：{{
              detail.updateTime
            }}&nbsp;&nbsp;&nbsp; <el-icon><Tickets /></el-icon>&nbsp;来源：{{
              detail.type
            }}&nbsp;&nbsp;&nbsp; <el-icon><View /></el-icon>&nbsp;阅读：423
          </div>
          <div class="content_text" v-html="detail.content"></div>
        </div>
        <!-- <div class="content_right">
          <div class="search u-p-10">
            <input v-model="inputvalue" />
            <img
              class="u-m-l-10"
              @click="getnewslist"
              src="../assets/searchimg.png"
              alt=""
            />
          </div>
          <div class="newbox u-m-t-20">
            <p>新闻热点</p>
            <el-divider />
            <div
              class="newbox_item pointer"
              @click="todetail(i.id)"
              v-for="i in newslist"
            >
              {{ i.title }}
              <el-divider />
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
import { HomeFilled, Clock, Tickets, View } from "@element-plus/icons-vue";
import {
  getnoticedetail,
  getadvicedetail,
  getnewsdetail,
} from "@/api/user/index";

let router = useRouter();
const inputvalue = ref("");
// 获取路由参数
const route = useRoute();

const noticeId = router.currentRoute.value.query.id;
const { proxy } = getCurrentInstance() as any;
const newslist: any = ref([]);
function getnewslist() {
  proxy
    .$get("news/list", {
      current: 1,
      limit: 10,
      keyword: inputvalue.value,
    })
    .then((res: any) => {
      newslist.value = res.data.records;
    });
}
getnewslist();
const todetail = async (noticeId) => {
  // router.push({
  //     path:'/noticedetail',
  //     query:{
  //         id:id,
  //         index:index
  //     }
  // })
  // router.go(0)
  const res = await getnewsdetail(noticeId);

  Object.assign(detail, res.data);
};
type detailtype = {
  title?: string;
  content?: string;
  updateTime?: string;
  type?: string;
};

const detail: detailtype = reactive({});
if (route.query.index === "1") {
  const getadvicedetaildata = async () => {
    const res = await getnewsdetail(noticeId);

    Object.assign(detail, res.data);
  };
  getadvicedetaildata();
} else {
  const getnoticedetaildata = async () => {
    const res = await getnoticedetail(noticeId);
    Object.assign(detail, res.data);
  };
  getnoticedetaildata();
}

onMounted(() => {
  // 页面加载后的操作
});
</script>

<style lang="scss" scoped>
/* 在这里添加样式 */
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@mixin flex {
  display: flex;
  align-items: center;
}
.noticedetail {
  .breadbox {
    margin: 30px auto 50px;
    width: 1400px;
  }

  .mainbox {
    width: 1400px;

    margin: 50px auto;
    border: none;

    .content {
      width: 100%;
      display: flex;

      .content_left {
        width: 100%;
        .title {
          font-size: 34px;
          font-weight: 800;
          text-align: center;
        }

        .time {
          text-align: center;
          font-size: 14px;
          margin-top: 22px;
          color: #999;
          @include flex();
          justify-content: center;
        }

        .content_text {
          font-size: 16px;
          margin-top: 64px;
          line-height: 28px;

          img {
            width: 100%;
            height: 400px;
          }

          .text_aline {
            text-align: center;
          }
        }
      }

      .content_right {
        flex: 3;
        padding-left: 20px;

        .search {
          @include flex();
          box-sizing: border-box;
          background-color: rgb(44, 155, 245);

          img {
            width: 25px;
            height: 25px;
          }
        }

        .newbox {
          p {
            font-size: 14px;
            font-weight: bold;
            color: red;
          }

          .newbox_item {
            font-size: 12px;
          }
        }
      }
    }
  }

  input {
    background-color: rgb(44, 155, 245);
    border-style: solid;
    border-color: #fff;
    outline: none;
    width: 330px;
  }

  input:focus {
    border-style: solid;
    border-color: #fff;
    outline: none;
  }

  .el-divider--horizontal {
    margin: 10px 0;
    width: 100%;
  }
  .datails_nav {
    line-height: normal;
    :deep(.el-breadcrumb__inner) {
      display: flex;
      align-items: center;
    }
  }
}
</style>
